<template>
  <standard-drawer
    ref="standardDrawer"
    :title="readOnly ? '详情' : (form.id ? '数据子项编辑' : '新增数据子项')"
    @close="close"
    @confirm="confirm"
    :confirmLoading="confirmLoading"
    :editable="!readOnly"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="数据类型" prop="label">
        <c-select v-model="form.dictCode" :remote="remote" :page-num="0"/>
      </a-form-model-item>
      <a-form-model-item label="显示名称" prop="label">
        <a-input v-model="form.label" placeholder="请输入显示名称"/>
      </a-form-model-item>
      <a-form-model-item label="值" prop="value">
        <a-input v-model="form.value" placeholder="请输入实际值"/>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sortNum">
        <a-input-number v-model="form.sortNum" placeholder="请输入排序号" style="width: 30%;"/>
      </a-form-model-item>
      <a-form-model-item label="可用状态" prop="useFlag">
        <c-radio-group d-type="sys_use_flag" v-model="form.useFlag"/>
      </a-form-model-item>
      <a-form-model-item label="可选场景" prop="optionalScenario">
        <c-select d-type="sys_dict_optional_scenario" v-model="form.optionalScenario" mode="multiple"/>
      </a-form-model-item>
      <a-form-model-item label="描述" prop="description">
        <a-input type="textarea" v-model="form.description" placeholder="请输入数据子项描述说明"/>
      </a-form-model-item>
    </a-form-model>
  </standard-drawer>
</template>

<script>
// import { axios } from '@/utils/request'
import { StandardDrawer } from '@/components'
import CSelect from '@/views/common/Select'
import CRadioGroup from '@/views/common/RadioGroup'
// 字典项 编辑 面板
export default {
  name: 'DictItemEditPanel',
  components: { StandardDrawer, CSelect, CRadioGroup },
  data () {
    return {
      confirmLoading: false,
      readOnly: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      form: {
        dictCode: '',
        useFlag: '1',
        sortNum: 0,
        optionalScenario: []
      },
      rules: {
        label: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { max: 50, message: '最多输入50个字符', trigger: 'change' }
        ],
        value: [
          { required: true, message: '此项为必输项', trigger: 'blur' },
          { max: 50, message: '最多输入50个字符', trigger: 'change' }
        ],
        sortNum: [
          { required: true, message: '此项为必输项', trigger: 'blur' }
        ],
        optionalScenario: [
          { required: true, message: '此项为必输项', trigger: 'blur' }
        ]
      },
      remote: null
    }
  },
  methods: {
    show (data, readOnly) {
      if (data) this.form = Object.assign({}, data) || {}
      this.loadDictType()
      this.$refs.standardDrawer.show()
    },
    close () {
      this.form = {
        dictCode: '',
        useFlag: '1',
        sortNum: 0,
        optionalScenario: []
      }
      this.confirmLoading = false
      this.$refs.ruleForm.resetFields()
    },
    confirm () {
      this.confirmLoading = true
      const req = this.form.id ? this.$http.put : this.$http.post
      const params = Object.assign({}, this.form)
      params.optionalScenario = params.optionalScenario.join('、')
      req('dict/item', params).then(res => {
        this.confirmLoading = false
        if (res.data) {
          this.$refs.standardDrawer.close()
          this.$message.success('操作成功')
          this.$emit('submit-success')
        } else {
          this.$message.error('操作失败')
        }
      }).catch(e => {
        this.confirmLoading = false
      })
    },
    loadDictType () {
      // 加载字典类型数据
      this.remote = { url: '/dict/type/dict', r: Date.now() }
    }
  }
}
</script>

<style scoped>

</style>
